<template>
  <div class="h-full w-full flex flex-col items-center justify-start">
    <div class="w-full p-2 flex flex-row gap-2 items-center">
      <Button
        class="w-7 h-7 rounded-md"
        size="icon"
        variant="outline"
        @click="onSidebarButtonClick"
      >
        <Icon v-if="chatStore.isSidebarOpen" icon="lucide:panel-left-close" class="w-4 h-4" />
        <Icon v-else icon="lucide:panel-left-open" class="w-4 h-4" />
      </Button>
    </div>
    <div class="h-0 w-full flex-grow flex flex-col items-center justify-center">
      <img src="@/assets/logo-dark.png" class="w-24 h-24" loading="lazy" />
      <h1 class="text-2xl font-bold px-8 pt-4">{{ t('newThread.greeting') }}</h1>
      <h3 class="text-lg px-8 pb-2">{{ t('newThread.prompt') }}</h3>
      <div class="h-12"></div>
      
      <!-- 智能体技能按钮 -->
      <div v-if="selectedAgent && selectedAgent.skills && selectedAgent.skills.length > 0" class="w-full max-w-2xl px-4 mb-4">
        <div class="flex flex-wrap gap-2 justify-center">
          <Button
            v-for="skill in selectedAgent.skills"
            :key="skill.id"
            variant="outline"
            size="sm"
            class="text-xs px-3 py-1 h-7"
            @click="handleSkillClick(skill)"
          >
            <Icon :icon="selectedAgent.icon || 'lucide:bot'" class="w-3 h-3 mr-1" />
            {{ skill.name }}
          </Button>
        </div>
      </div>
      
      <ChatInput
        ref="chatInputRef"
        key="newThread"
        class="!max-w-2xl flex-shrink-0 px-4"
        :rows="3"
        :max-rows="10"
        :context-length="contextLength"
        @send="handleSend"
      >
        <template #addon-buttons>
          <div
            key="newThread-model-select"
            class="new-thread-model-select overflow-hidden flex items-center h-7 rounded-lg shadow-sm border border-input transition-all duration-300"
            :dir="langStore.dir"
          >
            <Popover v-model:open="modelSelectOpen">
              <PopoverTrigger as-child>
                <Button
                  variant="outline"
                  class="flex border-none rounded-none shadow-none items-center gap-1.5 px-2 h-full"
                  size="sm"
                >
                  <ModelIcon
                    class="w-4 h-4"
                    :model-id="activeModel.providerId"
                    :is-dark="themeStore.isDark"
                  ></ModelIcon>
                  <!-- <Icon icon="lucide:message-circle" class="w-5 h-5 text-muted-foreground" /> -->
                  <h2 class="text-xs font-bold max-w-[150px] truncate">{{ name }}</h2>
                  <Badge
                    v-for="tag in activeModel.tags"
                    :key="tag"
                    variant="outline"
                    class="py-0 rounded-lg"
                    size="xs"
                  >
                    {{ t(`model.tags.${tag}`) }}</Badge
                  >
                  <Icon icon="lucide:chevron-right" class="w-4 h-4" />
                </Button>
              </PopoverTrigger>
              <PopoverContent align="start" class="p-0 w-80">
                <ModelSelect
                  :type="[ModelType.Chat, ModelType.ImageGeneration]"
                  @update:model="handleModelUpdate"
                />
              </PopoverContent>
            </Popover>
            <ScrollablePopover
              v-model:open="settingsPopoverOpen"
              @update:open="handleSettingsPopoverUpdate"
              align="start"
              content-class="w-80"
              :enable-scrollable="true"
            >
              <template #trigger>
                <Button
                  class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300"
                  :class="{
                    'w-0 opacity-0 p-0 overflow-hidden': !showSettingsButton && !isHovering,
                    'w-7 opacity-100': showSettingsButton || isHovering
                  }"
                  size="icon"
                  variant="outline"
                >
                  <Icon icon="lucide:settings-2" class="w-4 h-4" />
                </Button>
              </template>
              <ChatConfig
                v-model:temperature="temperature"
                v-model:context-length="contextLength"
                v-model:max-tokens="maxTokens"
                v-model:system-prompt="systemPrompt"
                v-model:artifacts="artifacts"
                v-model:thinking-budget="thinkingBudget"
                v-model:enable-search="enableSearch"
                v-model:forced-search="forcedSearch"
                v-model:search-strategy="searchStrategy"
                v-model:reasoning-effort="reasoningEffort"
                v-model:verbosity="verbosity"
                :context-length-limit="contextLengthLimit"
                :max-tokens-limit="maxTokensLimit"
                :model-id="activeModel?.id"
                :provider-id="activeModel?.providerId"
                :model-type="activeModel?.type"
              />
            </ScrollablePopover>
          </div>
        </template>
      </ChatInput>
      <div class="h-12"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import ChatInput from './ChatInput.vue'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import ScrollablePopover from './ScrollablePopover.vue'
import { Button } from '@/components/ui/button'
import ModelIcon from './icons/ModelIcon.vue'
import { Badge } from '@/components/ui/badge'
import { Icon } from '@iconify/vue'
import ModelSelect from './ModelSelect.vue'
import { useChatStore } from '@/stores/chat'
import { Agent, MODEL_META } from '@shared/presenter'
import { useSettingsStore } from '@/stores/settings'
import { computed, nextTick, ref, watch, onMounted } from 'vue'
import { UserMessageContent } from '@shared/chat'
import ChatConfig from './ChatConfig.vue'
import { usePresenter } from '@/composables/usePresenter'
import { useEventListener } from '@vueuse/core'
import { useThemeStore } from '@/stores/theme'
import { useLanguageStore } from '@/stores/language'
import { ModelType } from '@shared/model'

const configPresenter = usePresenter('configPresenter')
const themeStore = useThemeStore()
const langStore = useLanguageStore()
// 定义偏好模型的类型
interface PreferredModel {
  modelId: string
  providerId: string
}

const { t } = useI18n()
const chatStore = useChatStore()
const settingsStore = useSettingsStore()

// 使用全局状态中的选中智能体（Pinia 会自动解包 ref，这里直接返回值）
const selectedAgent = computed(() => chatStore.selectedAgent || null)
const activeModel = ref({
  name: '',
  id: '',
  providerId: '',
  tags: [],
  type: ModelType.Chat
} as {
  name: string
  id: string
  providerId: string
  tags: string[]
  type: ModelType
})

const temperature = ref(0.6)
const contextLength = ref(16384)
const contextLengthLimit = ref(16384)
const maxTokens = ref(4096)
const maxTokensLimit = ref(4096)
const systemPrompt = ref('')
const artifacts = ref(settingsStore.artifactsEffectEnabled ? 1 : 0)
const thinkingBudget = ref<number | undefined>(undefined)
const enableSearch = ref<boolean | undefined>(undefined)
const forcedSearch = ref<boolean | undefined>(undefined)
const searchStrategy = ref<'turbo' | 'max' | undefined>(undefined)
const reasoningEffort = ref<'minimal' | 'low' | 'medium' | 'high' | undefined>(undefined)
const verbosity = ref<'low' | 'medium' | 'high' | undefined>(undefined)
//动态加载系统提示词
const loadSystemPrompt = async (agent?: Agent | null) => {
  try {
    const prompt = await configPresenter.getDefaultSystemPrompt(agent || undefined)
    systemPrompt.value = prompt
  } catch (error) {
    console.error('[NewThread] Failed to load system prompt', error)
  }
}

const name = computed(() => {
  return activeModel.value?.name ? activeModel.value.name.split('/').pop() : ''
})

watch(
  () => activeModel.value,
  async () => {
    // console.log('activeModel', activeModel.value)
    const config = await configPresenter.getModelDefaultConfig(
      activeModel.value.id,
      activeModel.value.providerId
    )
    temperature.value = config.temperature ?? 0.7
    contextLength.value = config.contextLength
    maxTokens.value = config.maxTokens
    contextLengthLimit.value = config.contextLength
    maxTokensLimit.value = config.maxTokens
    thinkingBudget.value = config.thinkingBudget
    enableSearch.value = config.enableSearch
    forcedSearch.value = config.forcedSearch
    searchStrategy.value = config.searchStrategy
    reasoningEffort.value = config.reasoningEffort
    verbosity.value = config.verbosity
    // console.log('temperature', temperature.value)
    // console.log('contextLength', contextLength.value)
    // console.log('maxTokens', maxTokens.value)
  }
)
watch(
  () => [settingsStore.enabledModels, chatStore.threads],
  async () => {
    // 如果有现有线程，使用最近线程的模型
    if (chatStore.threads.length > 0) {
      if (chatStore.threads[0].dtThreads.length > 0) {
        const thread = chatStore.threads[0].dtThreads[0]
        const modelId = thread.settings.modelId
        const providerId = thread.settings.providerId

        // 同时匹配 modelId 和 providerId
        if (modelId && providerId) {
          for (const provider of settingsStore.enabledModels) {
            if (provider.providerId === providerId) {
              for (const model of provider.models) {
                if (model.id === modelId) {
                  activeModel.value = {
                    name: model.name,
                    id: model.id,
                    providerId: provider.providerId,
                    tags: [],
                    type: model.type ?? ModelType.Chat
                  }
                  return
                }
              }
            }
          }
        }
      }
    }

    // 如果没有现有线程，尝试使用用户上次选择的模型
    try {
      const preferredModel = (await configPresenter.getSetting('preferredModel')) as
        | PreferredModel
        | undefined
      if (preferredModel && preferredModel.modelId && preferredModel.providerId) {
        // 验证偏好模型是否还在可用模型列表中
        for (const provider of settingsStore.enabledModels) {
          if (provider.providerId === preferredModel.providerId) {
            for (const model of provider.models) {
              if (model.id === preferredModel.modelId) {
                activeModel.value = {
                  name: model.name,
                  id: model.id,
                  providerId: provider.providerId,
                  tags: [],
                  type: model.type ?? ModelType.Chat
                }
                return
              }
            }
          }
        }
      }
    } catch (error) {
      console.warn('Failed to get user preferred model:', error)
    }

    // 如果没有偏好模型或偏好模型不可用，使用第一个可用模型
    if (settingsStore.enabledModels.length > 0) {
      const model = settingsStore.enabledModels
        .flatMap((provider) =>
          provider.models.map((m) => ({ ...m, providerId: provider.providerId }))
        )
        .find((m) => m.type === ModelType.Chat || m.type === ModelType.ImageGeneration)
      if (model) {
        activeModel.value = {
          name: model.name,
          id: model.id,
          providerId: model.providerId,
          tags: [],
          type: model.type ?? ModelType.Chat
        }
      }
    }
  },
  { immediate: true, deep: true }
)

const modelSelectOpen = ref(false)
const settingsPopoverOpen = ref(false)
const showSettingsButton = ref(false)
const isHovering = ref(false)
const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null)
// 监听鼠标悬停
const handleMouseEnter = () => {
  isHovering.value = true
}

const handleMouseLeave = () => {
  isHovering.value = false
}

const onSidebarButtonClick = () => {
  chatStore.isSidebarOpen = !chatStore.isSidebarOpen
}

const handleModelUpdate = (model: MODEL_META, providerId: string) => {
  activeModel.value = {
    name: model.name,
    id: model.id,
    providerId: providerId,
    tags: [],
    type: model.type ?? ModelType.Chat
  }
  chatStore.updateChatConfig({
    modelId: model.id,
    providerId: providerId
  })

  // 保存用户的模型偏好设置
  configPresenter.setSetting('preferredModel', {
    modelId: model.id,
    providerId: providerId
  })

  modelSelectOpen.value = false
}

// 监听 deeplinkCache 变化
watch(
  () => chatStore.deeplinkCache,
  (newCache) => {
    if (newCache) {
      if (newCache.modelId) {
        const matchedModel = settingsStore.findModelByIdOrName(newCache.modelId)
        console.log('matchedModel', matchedModel)
        if (matchedModel) {
          handleModelUpdate(matchedModel.model, matchedModel.providerId)
        }
      }
      if (newCache.msg || newCache.mentions) {
        const setInputContent = () => {
          if (chatInputRef.value) {
            console.log('[NewThread] Setting input content, msg:', newCache.msg)
            const chatInput = chatInputRef.value
            chatInput.clearContent()
            if (newCache.mentions) {
              newCache.mentions.forEach((mention) => {
                chatInput.appendMention(mention)
              })
            }
            if (newCache.msg) {
              console.log('[NewThread] Appending text:', newCache.msg)
              chatInput.appendText(newCache.msg)
            }
            return true
          }
          return false
        }

        if (!setInputContent()) {
          console.log('[NewThread] ChatInput ref not ready, retrying...')
          nextTick(() => {
            if (!setInputContent()) {
              setTimeout(() => {
                if (!setInputContent()) {
                  console.warn('[NewThread] Failed to set input content after retries')
                }
              }, 100)
            }
          })
        }
      }
      if (newCache.systemPrompt) {
        systemPrompt.value = newCache.systemPrompt
      }
      if (newCache.autoSend && newCache.msg) {
        handleSend({
          text: newCache.msg || '',
          files: [],
          links: [],
          think: false,
          search: false
        })
      }
      // 清理缓存
      chatStore.clearDeeplinkCache()
    }
  },
  { immediate: true }
)

onMounted(async () => {
  const groupElement = document.querySelector('.new-thread-model-select')
  if (groupElement) {
    useEventListener(groupElement, 'mouseenter', handleMouseEnter)
    useEventListener(groupElement, 'mouseleave', handleMouseLeave)
  }
})

const handleSettingsPopoverUpdate = (isOpen: boolean) => {
  if (isOpen) {
    // 如果打开，立即显示按钮
    showSettingsButton.value = true
  } else {
    // 如果关闭，延迟隐藏按钮，等待动画完成
    setTimeout(() => {
      showSettingsButton.value = false
    }, 300) // 300ms是一个常见的动画持续时间，可以根据实际情况调整
  }
}

// 初始化时设置showSettingsButton的值与settingsPopoverOpen一致
watch(
  settingsPopoverOpen,
  (value) => {
    if (value) {
      showSettingsButton.value = true
    }
  },
  { immediate: true }
)

watch(
  selectedAgent,
  (agent) => {
    loadSystemPrompt(agent)
  },
  { immediate: true }
)

// 定义模板部分的类型
interface TemplateTextPart {
  type: 'text'
  content: string
}

interface TemplatePlaceholderPart {
  type: 'placeholder'
  placeholder: string
}

type TemplatePart = TemplateTextPart | TemplatePlaceholderPart

// 解析模板字符串并构建模板内容
const parseTemplate = (template: string): TemplatePart[] => {
  const parts: TemplatePart[] = []
  let currentIndex = 0
  const regex = /\[([A-Z_]+)\]/g
  let match
  
  while ((match = regex.exec(template)) !== null) {
    // 添加匹配前的文本
    if (match.index > currentIndex) {
      parts.push({
        type: 'text',
        content: template.slice(currentIndex, match.index)
      })
    }
    
    // 添加占位符
    parts.push({
      type: 'placeholder',
      placeholder: match[0]
    })
    
    currentIndex = match.index + match[0].length
  }
  
  // 添加剩余的文本
  if (currentIndex < template.length) {
    parts.push({
      type: 'text',
      content: template.slice(currentIndex)
    })
  }
  
  return parts
}

// 处理技能按钮点击
const handleSkillClick = async (skill: any) => {
  console.log('Skill clicked:', skill.name)
  
  // 如果技能有examples，将第一个示例添加到输入框
  if (skill.examples && skill.examples.length > 0 && chatInputRef.value) {
    const example = skill.examples[0] // 使用第一个示例
    
    // 清空输入框
    chatInputRef.value.clearContent()
    
    // 解析模板
    const templateParts = parseTemplate(example)
    
    // 插入模板内容，添加延迟确保光标位置正确
    for (const part of templateParts) {
      if (part.type === 'text' && part.content) {
        chatInputRef.value.appendText(part.content)
      } else if (part.type === 'placeholder' && part.placeholder) {
        chatInputRef.value.insertTemplatePlaceholder(part.placeholder)
      }
      // 添加小延迟确保光标位置正确
      await new Promise(resolve => setTimeout(resolve, 10))
    }
  } else {
    console.log('Skill has no examples or input box is not initialized')
  }
  
  // 这里可以添加技能点击后的逻辑，比如发送特定的消息
  // 例如：chatStore.sendMessage({ text: `使用技能: ${skill.name}`, files: [], links: [], think: false, search: false })
}

const handleSend = async (content: UserMessageContent) => {
  const threadId = await chatStore.createThread(content.text, {
    providerId: activeModel.value.providerId,
    modelId: activeModel.value.id,
    systemPrompt: systemPrompt.value,
    temperature: temperature.value,
    contextLength: contextLength.value,
    maxTokens: maxTokens.value,
    artifacts: artifacts.value as 0 | 1,
    thinkingBudget: thinkingBudget.value,
    enableSearch: enableSearch.value,
    forcedSearch: forcedSearch.value,
    searchStrategy: searchStrategy.value,
    reasoningEffort: reasoningEffort.value,
    verbosity: verbosity.value,
    enabledMcpTools: chatStore.chatConfig.enabledMcpTools
  } as any)
  console.log('threadId', threadId, activeModel.value)
  chatStore.sendMessage(content)
}
</script>

<style scoped>
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
  transition-duration: 300ms;
}
</style>
